<template>
  <el-card class="box-card" style="height: 100%;" shadow="never">
    <template #header>
      <div class="card-header">
        <span>个人中心</span>
      </div>
    </template>

    <div style="display: flex; margin-top: 50px;">
      <div class="left">
        <el-avatar v-if="userInfo.avatar" :src='"https://seedling-classmate.oss-cn-beijing.aliyuncs.com/"+userInfo.avatar'
                   style="width: 150px;
                   height: 150px;
                   margin-left: 100px;"></el-avatar>
        <el-avatar v-else class="avatar-box"></el-avatar>

        <el-upload
            class="avatar-uploader"
            :action="'/api/personController/uploadAvatar'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            style="margin-left: 130px; margin-top: 30px;">
          <el-button type="primary">更换头像</el-button>
        </el-upload>
      </div>

      <div class="right">
        <el-form label-width="80px" :model="userInfo" style="width: 60%">
          <el-form-item label="用户名">
            <el-input v-model="userInfo.name"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="userInfo.email"></el-input>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="userInfo.phone"></el-input>
          </el-form-item>
          <el-form-item label="所属角色">
            <el-input :placeholder="userInfo.remark"
                      :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-input :placeholder="userInfo.createTime"
                      :disabled="true"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="dialogFormVisible = true">修改密码</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </el-card>

  <el-dialog v-model="dialogFormVisible" title="修改密码">
    <el-form :model="pwdForm">
      <el-form-item label="请输入新密码" :label-width="'140px'">
        <el-input v-model="pwdForm.pwd1" autocomplete="off" />
      </el-form-item>
      <el-form-item label="再次输入新密码" :label-width="'140px'">
        <el-input v-model="pwdForm.pwd2" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="changePwd">
          确认修改
        </el-button>
      </span>
    </template>
  </el-dialog>

</template>
<script>
import {ElMessage} from "element-plus";
import axios from 'axios';
export default{
  // eslint-disable-next-line vue/multi-word-component-names
  name: "person",
  data() {
    return{
      dialogFormVisible: false,
      pwdForm: {
        pwd1: '',
        pwd2: ''
      },
      userId:0,
      userInfo:{
        name:'',
        email: '',
        phone:''
      }
    }
  },
  methods: {
    getUserInfo() {
      this.axios.post('/userLoginController/getUserInfo').then(res => {
        if(res.status === 200) {
          this.userInfo=res.data.data;
          console.log("获取用户信息：",this.userInfo)
        }
        else {
          ElMessage.warning('error')
        }
      })
    },
    onSubmit() {
      this.axios.post('/personController/changeUserInfo', this.userInfo).then(res => {
        let data = res.data;
        if (data.code === 200) {
          ElMessage.success("用户信息修改成功");
          this.getUserInfo();
        }
        else {
          ElMessage.warning(data.message)
        }
      })
    },
    changePwd() {
      if(!this.pwdForm.pwd1 || !this.pwdForm.pwd2){
        ElMessage.warning('请填写完整！');
      } else {
        if(this.pwdForm.pwd1 !== this.pwdForm.pwd2){
          ElMessage.warning('两次密码不一致！');
        } else {
          axios.post('/personController/changePassword',{
            password: this.pwdForm.pwd2,
          }).then(res => {
            if (res.data.code === 200){
              ElMessage.success("密码修改成功！")
              this.dialogFormVisible = false
            } else {
              ElMessage.warning(res.data.message)
            }
          })
        }
      }
    },
    handleAvatarSuccess(res) {
      if (res && res.code === 200) {
        this.$message.success('上传成功');
        this.getUserInfo();
      } else if (res && res.message) {
        this.$message.error(res.message);
      } else {
        this.$message.error('上传失败，未知错误');
      }
    },
    beforeAvatarUpload(file) {
      const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png'; // 修改这一行
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPGorPNG) {
        this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!'); // 修改这一行
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPGorPNG && isLt2M; // 修改这一行
    },

  },
  created() {
    this.userId = this.list = this.$route.query.userId;
  },
  mounted() {
    this.getUserInfo();
  }}
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.left {
  width: 30%;
  background-size: cover;
  position: relative;
}
.avatar-box {
  width: 150px;
  height: 150px;
  margin-left: 100px;
  background: url("@/assets/defaultAvatar.png") no-repeat;
  background-size: 150px 150px;
}
.right {
  width: 60%;
  position: relative;
  font-size: 14px;
}

</style>